<template>
    <div class="index-container-Info" >
        <ul class="Info-nav font">
            <li v-for="(item,key) in content" @mouseover="onChange(key)" ><router-link :class="{'active': key===newsIndex}" :to="{name:path, params:{p_type: p_type,a_type: '*'}}">{{key}}</router-link></li>
            <li @mouseover="onChange('lastArticle')">
                <router-link :class="{'active': 'lastArticle' === newsIndex}" :to="{path: 'index/find_article'}">排行榜单</router-link>
            </li>
            <li @mouseover="onChange('latestMessage')">
         <router-link :class="{'active': 'latestMessage' === newsIndex}" :to="{path: 'index/latest_Article'}">最新消息</router-link>
            </li>
        </ul>
        <div class="Info-content font" v-for="(item, key) in content" v-if="key === newsIndex" >
            <li v-for="(item2, index) in item">  <!--这里的item是第四行的v-for中的item ，代表的是apicommon.cs中的55-28行的noticelist等 noticelist等 是根据文章类别查询的文章列表对象 -->
                <router-link :to="{name:detailPath, params:{p_type: p_type, id: item2.id}}">
                    <img src='../../images/blue1.jpg'>
                    <span>{{item2.title}}</span>
                </router-link>
                <div style="color:#333333;line-height:40px;font-size:16px;float:right">
                    {{new Date(parseInt(item2.create_time)).toLocaleDateString()}}
                </div>
            </li>
        </div>
        <div class="Info-content font"  v-if="'lastArticle'=== newsIndex" >
            <li v-for="(item2,index) in lastest">
                <router-link :to="{name:detailPath, params: {p_type: item2.p_type, id: item2.id}}">  
                    <img src='../../images/blue1.jpg'>
                    <span>{{item2.title}}</span>
                </router-link>
                <div style="color:#333333;line-height:40px;font-size:16px;float:right">
                    {{new Date(parseInt(item2.create_time)).toLocaleDateString()}}
                </div>
            </li>
        </div>

       <!-- 新添的最新消息  -->
   <div class="Info-content font"  v-if="'latestMessage'=== newsIndex" >
            <li v-for="(item3,index) in latestNews">
            <router-link :to="{name:detailPath, params:{p_type: item3.p_type, id: item3.id}}">     <!-- 问题：这里的p_type必须加item3，不加的话文章详情那里左栏的大标题显示文章类别错误，但是最上面的没有加却正确，是因为下面重新给p_type赋值了 ，而没有给最新消息和排行榜单重新赋值（因为根据鼠标放在上面的key无法显示是什么类别文章所以不能赋值，看看即明白） -->
                    <img src='../../images/blue1.jpg'>
                    <span>{{item3.title}}</span>
                </router-link>
                <div style="color:#333333;line-height:40px;font-size:16px;float:right">
                    {{new Date(parseInt(item3.create_time)).toLocaleDateString()}}
                </div>
            </li>
        </div>         

     </div>      
</template>
<script>
    export default {  //export default 以便别的组件来引用此组件  default 就是其他组件可以以任意名称引入此组件
        props: {     //props 用于父组件向子组件传值，这里content 和lastest均是在父组件index.vue中定义的
            content:{
                type: Object
            },
            lastest:{
                type:Array
            },
           latestNews:{ //新添的最新消息
                 type:Array
             }
        },
        data () {
            return {
                newsIndex:"通知公告",
                path:'article_list',
                detailPath:'main_article_detail',
                p_type:'notice',
        }
    },
    methods:{
        onChange(key){
            this.newsIndex = key;
            if('lastArticle'=== this.newsIndex){
                this.newsIndex = 'lastArticle';
            }else if('latestMessage'=== this.newsIndex){//新添的最新消息
              this.newsIndex = 'latestMessage';
            }else if(this.newsIndex === '通知公告'){
                this.p_type = "notice";
            }else if(this.newsIndex === '新闻资讯'){
                this.p_type = "news";
            }else{
                this.p_type = "laws"; 
            }
        }
    }
}
</script>
<style scoped>
       .index-container-Info{
         height:395px;
         border: 1px solid #aaaaaa;
     }
     .Info-nav{
         height: 45px;
         width: 100%;
         border-bottom: 1px solid #aaaaaa;
     }
     .Info-nav li{  
         float: left;
         width: 94px;
     }
        
     .Info-nav li a{
         display: block;
         height: 45px;
        line-height: 45px;
        text-align: center;
         text-decoration: none;
         color: #333333;
         font-size: 18px;
     }
    .active{
        background-color: #e24121;
        color: #ffffff !important;
    }
    .Info-content{
        height: 349px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .Info-content li{
        height: 40px;
        line-height: 40px;
        list-style: none;
        font-size: 16px;
        overflow: hidden;
    }
    .Info-content a{
        display: block;
        width: 75%;
        float: left;
        color: #333333;
    }
    .Info-content a:hover{
         font-weight: 700;
    }
</style>